<template>
  <el-row>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">自用增卜辅助宏</span>
      </div>
      <div class="text item">
        <p>辅助宏的用途是简化操作、加快判断，每个人的辅助宏最好根据自身习惯进行调整。本辅助宏仅起到抛砖引玉的效果</p>
        <p>分享一下自用的三个简化操作的辅助宏，包括（基础循环宏、炸灯宏、灯斗灯兵宏）</p>
        <p>主动的祝由·火离和变卦手动操作，三星临断兵最后一跳的延迟看情况手动操作</p>
        <p>使用时机:</p>
        <p>起手奇门飞宫手动放三个灯，虽然你要想也可以直接按键启动，但是还是倒数手动起个卦最好，提前手动起卦是对衍天这个职业最基本的尊重也是你开始学习输出手法走上大神之路的第一步。起手第一次炸灯是第二层奇门飞宫充能完毕，按炸灯宏，按到下完三灯组成连局继续按循环宏。之后每次炸灯都是观察返闭惊魂CD小于3秒或是冷却完毕。</p>
        <p>基础循环宏：返闭惊魂CD大于3s（2个GCD）时做基础循环使用（如果想手动操作变卦操作请删除该宏2 3 4行）</p>
        <p>炸灯宏：返闭惊魂CD小于3s（2个GCD）时使用，可以打出（非火卦就变卦）临炸灯临灯。可以配合灯斗灯兵宏使用</p>
        <p>灯斗灯兵宏：刚刚使用过炸灯宏，在炸灯宏刚打出鬼星开穴时切换到这个宏，可以打出灯斗灯兵。缺点是宏判断兵可以释放会慢一丢丢，优点是肯定不会断兵</p>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never" >
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">基础循环宏【这个宏偷的买糖的】</span><el-button size="mini" type="success" round  @click="handleCopy" class="hong1">点击复制</el-button>
      </div>
      <div class="text item" >
        <ul style="font-size: larger;line-height:normal;list-style-type: none;" ref="hong1">
          <li>/cast 兵主逆</li>
          <li>/cast [bufftime:荧入白<3|nobuff:荧入白] 起卦</li>
          <li>/cast [tnobuff:祝由·火离] 祝由·火离</li>
          <li>/cast [tnobuff:祝由·火离] 变卦</li>
          <li>/cast 天斗旋</li>
          <li>/cast 三星临</li>
        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">山水炸灯宏（实现变火临炸）</span><el-button size="mini" type="success" round @click="handleCopy2" class="hong2">点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none; " ref="hong2" >
          <li>/cast 起卦</li>
          <li>/cast [nobuff:火离] 变卦</li>
          <li>/cast 三星临</li>
          <li>/cast 鬼星开穴</li>
          <li>/cast [bufftime:鬼遁>26] 返闭惊魂</li>
          <li>/cast [bufftime:鬼遁>26] 奇门飞宫</li>
        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">灯斗灯兵宏（在炸灯后打出灯斗灯兵的技能穿插）</span><el-button size="mini" type="success" round @click="handleCopy3" class="hong3" >点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none;" ref="hong3">
          <li>/cast [buff:鬼遁] 奇门飞宫</li>
          <li>/cast [buff:鬼遁] 返闭惊魂</li>
          <li>/cast [last_skill~=奇门飞宫] 天斗旋</li>
          <li>/cast [skill_energy:奇门飞宫=0&buff:返闭惊魂] 兵主逆</li>
        </ul>
      </div>
    </el-card>
    <el-card :body-style="{ padding: '0px' }" shadow="never">
      <div slot="header" class="clearfix" >
        <span style="font-size: x-large">火卦炸灯宏（新手忽略此条，实现临炸变山，这个宏用在自身变卦CD好了并且火卦可以炸灯的时候替换山水炸灯宏，后续还是可以接灯斗灯兵宏）</span><el-button size="mini" type="success" round @click="handleCopy4" class="hong4">点击复制</el-button>
      </div>
      <div class="text item">
        <ul style="font-size: larger;line-height:normal;list-style-type: none; " ref="hong4" >
          <li>/cast 三星临</li>
          <li>/cast 鬼星开穴</li>
          <li>/cast 变卦</li>
          <li>/cast [bufftime:鬼遁>20] 返闭惊魂</li>
          <li>/cast [bufftime:鬼遁>20] 奇门飞宫</li>
        </ul>
      </div>
    </el-card>

  </el-row>
</template>

<script>
  import Clipboard from 'clipboard'
  export default {
    name: 'hong',
    data(){
      return{
        copyData:null,
      }
    },
    methods:{
      handleCopy(){
        this.copyData = null
        this.copyData = this.$refs.hong1.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
        this.copyhong1()
      },
      copyhong1 () {
        var Url = this.copyData;
        var clipboard = new Clipboard(".hong1",
          {text: function() {
            return Url;}})
        console.log(this.copyData)
        clipboard.on('success', e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
          //  释放内存
          clipboard.destory()
        })
        clipboard.on('error', e =>{
          // 不支持复制
          this.$message({
            message: '该浏览器不支持复制',
            type: 'failure'
          })
          // 释放内存
          clipboard.destory()
        })
      },
      handleCopy2(){
        this.copyData = null
        this.copyData = this.$refs.hong2.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
        this.copyhong2()
      },
      copyhong2 () {
        var Url = this.copyData;
        var clipboard = new Clipboard(".hong2",
          {text: function() {
              return Url;}})
        console.log(this.copyData)
        clipboard.on('success', e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
          //  释放内存
          clipboard.destory()
        })
        clipboard.on('error', e =>{
          // 不支持复制
          this.$message({
            message: '该浏览器不支持复制',
            type: 'failure'
          })
          // 释放内存
          clipboard.destory()
        })
      },
      handleCopy3(){
        this.copyData = null
        this.copyData = this.$refs.hong3.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
        this.copyhong3()
      },
      copyhong3 () {
        var Url = this.copyData;
        var clipboard = new Clipboard(".hong3",
          {text: function() {
              return Url;}})
        console.log(this.copyData)
        clipboard.on('success', e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
          //  释放内存
          clipboard.destory()
        })
        clipboard.on('error', e =>{
          // 不支持复制
          this.$message({
            message: '该浏览器不支持复制',
            type: 'failure'
          })
          // 释放内存
          clipboard.destory()
        })
      },
      handleCopy4(){
        this.copyData = null
        this.copyData = this.$refs.hong4.innerHTML.replace("&amp;","&").replace(/&lt;/g,'<').replace(/&gt;/g,'>').replace(/<li>/g,'').replace(/<\/li>/g,"\n");
        this.copyhong4()
      },
      copyhong4 () {
        var Url = this.copyData;
        var clipboard = new Clipboard(".hong4",
          {text: function() {
              return Url;}})
        console.log(this.copyData)
        clipboard.on('success', e => {
          this.$message({
            message: '复制成功',
            type: 'success'
          })
          //  释放内存
          clipboard.destory()
        })
        clipboard.on('error', e =>{
          // 不支持复制
          this.$message({
            message: '该浏览器不支持复制',
            type: 'failure'
          })
          // 释放内存
          clipboard.destory()
        })
      }
    }
  }
</script>

<style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
    margin-left: 20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    height: 100%;
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .qixueimage {
    margin-left: 20px;
    width: 50%;
    height: 50%;
    display: block;
    object-fit: cover
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
